<template>
  <div class="noticeAll">
    <v-header :userName="userName"></v-header>
    <section class='noticeAll_section'>
      <div class="noticeAll_tabs">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="任免信息" name="first">
            <div v-if="show_list">
							<div v-if="noticeLists && noticeLists.length >0">
		              <ul class="publicity_list">
		                <template >
		                  <li class="publicity_items" v-for="(item,index) in noticeLists" :key="item.id" @click="showDetail(item.id)">
		                    <div class="items_head">
		                      <span class="items_sub">公</span>
		                      <span class="items_main">{{item.title_name}}</span>
		                      <span class="items_time">{{item.author_time | timeFormat2(0, 10)}}</span>
		                    </div>
		                  </li>
		                </template>
		
		              </ul>
		              <div class="loadMore" @click="loadMores(1)">加载更多</div>						
							</div>
              
	            <div v-else>
		            <div class="imgBox"><img src="/static/images/nodata.svg" alt=""></div>
		            <p class="data">暂无数据</p>
		        	</div>
            </div>
            <div class="detail_ctn" v-if="!show_list">
              <div v-if="allData">
                <h1>{{allData.title_name}}</h1>
                <div class="tip">
                  <span>发布时间：</span>
                  <span>{{allData.author_time | timeFormat2(0, 10)}}</span>
                  <span>|</span>
                  <span>关注：</span>
                  <span>{{allData.click_amount}}</span>
                  <span class="toback" @click="showList()">返回列表</span>
                </div>
              </div>
              <div v-if="allData" class="main_txt" v-html="allData.content">
            		     这里是主题内容
              </div>
              <div style="overflow: hidden;height: 50px;background: #ecf0f5;line-height: 50px;padding: 0 30px;">
                <div class="hover ellipsis" :title="prevNotice.title_name || '无'"  @click="toPrev" style="float: left;width: 50%;">上一篇：{{prevNotice.title_name ?  prevNotice.title_name : '无' }}</div>
                <div class="hover ellipsis" :title="nextNotice.title_name || '无'"  @click="toNext" style="float: right;width: 48%;text-align: right;">下一篇：{{nextNotice.title_name ?  nextNotice.title_name : '无' }}</div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="公示消息" name="second">
            <div v-if="show_list">
							
							<div v-if="appointLists && appointLists.length >0">
		              <ul class="appoint_list">
		                <li class="appoint_items" v-for="(item,index) in appointLists" :key="item.id" @click="showDetail(item.id)">
		                  <div class="items_head">
		                    <span class="items_sub">任</span>
		                    <span class="items_main">{{item.title_name}}</span>
		                    <span class="items_time">{{item.author_time | timeFormat2(0, 10)}}</span>
		                  </div>
		                </li>
		              </ul>
		              <div class="loadMore" @click="loadMores(2)">加载更多</div>
							</div>
              
              <div v-else>
		            <div class="imgBox"><img src="/static/images/nodata.svg" alt=""></div>
		            <p class="data">暂无数据</p>
		        	</div>
		        	
            </div>
            <div class="detail_ctn" v-if="!show_list">
              <div v-if="allData">
                <h1>{{allData && allData.title_name}}</h1>
                <div class="tip">
                  <span>发布时间：</span>
                  <span>{{allData.author_time | timeFormat2(0, 10)}}</span>
                  <span>|</span>
                  <span>关注：</span>
                  <span>{{allData && allData.click_amount}}</span>
                  <span class="toback" @click="showList()">返回列表</span>
                </div>
              </div>
              <div v-if="allData" class="main_txt" v-html="allData.content">
                这里是主题内容
              </div>
              <div style="overflow: hidden;height: 50px;background: #ecf0f5;line-height: 50px;padding: 0 30px;">
                <div class="hover ellipsis" :title="prevNotice.title_name || '无'" @click="toPrev"  style="float: left;width: 50%;">上一篇：{{prevNotice.title_name ?  prevNotice.title_name : '无' }}</div>
                <div class="hover ellipsis" :title="nextNotice.title_name || '无'" @click="toNext"  style="float: right;width: 48%;text-align: right;">下一篇：{{nextNotice.title_name ?  nextNotice.title_name : '无' }}</div>
              </div>
            </div>

          </el-tab-pane>
          <el-tab-pane label="招聘信息" name="third">
           
            <div v-if="show_list">
							
							<div v-if="recruitLists && recruitLists.length>0">
		              <ul class="appoint_list">
		                <li class="appoint_items" v-for="(item,index) in recruitLists" :key="item.id" @click="showDetail(item.id)">
		                  <div class="items_head">
		                    <span class="items_sub">聘</span>
		                    <span class="items_main">{{item.title_name}}</span>
		                    <span class="items_time">{{item.author_time | timeFormat2(0, 10)}}</span>
		                  </div>
		                </li>
		              </ul>
		              <div class="loadMore" @click="loadMores(3)">加载更多</div>
							</div>
              
              <div v-else>
		            <div class="imgBox"><img src="/static/images/nodata.svg" alt=""></div>
		            <p class="data">暂无数据</p>
		        	</div>
		        	
            </div>
            <div class="detail_ctn" v-if="!show_list">
              <div v-if="allData">
                <h1>{{allData && allData.title_name}}</h1>
                <div class="tip">
                  <span>发布时间：</span>
                  <span>{{allData.author_time | timeFormat2(0, 10)}}</span>
                  <span>|</span>
                  <span>关注：</span>
                  <span>{{allData && allData.click_amount}}</span>
                  <span class="toback" @click="showList()">返回列表</span>
                </div>
              </div>
              <div v-if="allData" class="main_txt" v-html="allData.content">
            			这里是主题内容
              </div>
              <div style="overflow: hidden;height: 50px;background: #ecf0f5;line-height: 50px;padding: 0 30px;">
                <div class="hover ellipsis" :title="prevNotice.title_name || '无'"  @click="toPrev" style="float: left;width: 50%;">上一篇：{{prevNotice.title_name ?  prevNotice.title_name : '无' }}</div>
                <div class="hover ellipsis" :title="nextNotice.title_name || '无'"  @click="toNext" style="float: right;width: 50%;text-align: right;">下一篇：{{nextNotice.title_name ?  nextNotice.title_name : '无' }}</div>
              </div>
            </div>
            


          </el-tab-pane>
        </el-tabs>
      </div>
      
    </section>
  </div>
</template>

<script>
  import Axios from 'axios'
  import Vue from 'vue'
  import { Tabs, TabPane, Message, Collapse, CollapseItem, Popover } from 'element-ui'
  import header from '@/components/employee/header'
  Vue.use(Tabs)
  Vue.use(TabPane)
  Vue.use(Collapse)
  Vue.use(CollapseItem)
  Vue.use(Popover)
  
  export default {
    name: 'noticeAll',
    data(){
			return {
        activeName: 'first',
        appointLists: [],
        noticeLists: [],
        recruitLists: [],
        show_list: true,
        show_employee:true,
        detailDatas: '',
        pageSize: 10,
        pageNum: 1,
        activeNames: [],
        allData: {},
        nextNotice:null,
        prevNotice:null,
        scrollTop:null,
        userName: localStorage.getItem('userName'),
      }
		},
		methods:{
      handleClick(tab, event) {
        this.show_list = true
        let url = window.location.href
        let newUrl = this.ChangeParam('tabInfo', this.activeName)
        let hrefUrl =  this.delQueStr(newUrl, 'id')
        location.href = this.delQueStr(hrefUrl, 'flag')
      },
      showDetail (id) {
				this.scrollTop = document.body.scrollTop;
				document.body.scrollTop = 0;
        this.show_list = !this.show_list;
        
        this.Axios.Post(this.URL.queryDetails.url,{id: id+''}).then((res) => {
          this.ChangeParam('id', id)
          console.log('信息详情',res);
          this.allData = res.data.datas.notice;

          // 上一篇

          // 下一篇
          this.nextNotice = res.data.datas.nextNotice || {};
          this.prevNotice = res.data.datas.previousNotice || {};
 
          // if (JSON.stringify(nextNotice) == "{}") {
          //   res.data.datas.nextNotice.title_name = '无'
          // }
          // if (JSON.stringify(previousNotice) == "{}") {
          //   res.data.datas.previousNotice.title_name = '无'
          // }
        });
      },
      recruitDetail (id) {
        this.activeNames = [id]
      },
      toPrev(){
            var id = this.prevNotice.id;
            if (!id) {
                return;
            }
            this.showDetail(id);
            this.show_list = false;
      },
      toNext(){
            var id = this.nextNotice.id;
            if (!id) {
                return;
            }
            this.showDetail(id);
            this.show_list = false;
      },
      showList () {
      	document.body.scrollTop = this.scrollTop;
        this.show_list = !this.show_list;
      },
      ChangeParam: function (name,value) {
        let url = window.location.href ;
        let newUrl = "";
        let reg = new RegExp("(^|)"+ name +"=([^&]*)(|$)");
        let tmp = name + "=" + value;
        if(url.match(reg) != null) {
          newUrl= url.replace(eval(reg), tmp);
        } else {
          if(url.match("[\?]")){
            newUrl= url + "&" + tmp;
          } else {
            newUrl= url + "?" + tmp;
          }
        }
        return newUrl;
      },
      //删除参数值
      delQueStr: function (url, ref) {
          var str = "";
          if (url.indexOf('?') != -1) {
            str = url.substr(url.indexOf('?') + 1);
          } else {
            return url;
          }
          var arr = "";
          var returnurl = "";
          var setparam = "";
          if (str.indexOf('&') != -1) {
            arr = str.split('&');
            console.log(arr)
            for (let i in arr) {
              if (arr[i].split('=')[0] != ref) {
                returnurl = returnurl + arr[i].split('=')[0] + "=" + arr[i].split('=')[1] + "&";
              }
            }
            console.log(url.substr(0, url.indexOf('?')) + "?" + returnurl.substr(0, returnurl.length - 1))
            return url.substr(0, url.indexOf('?')) + "?" + returnurl.substr(0, returnurl.length - 1);
          } else {
            arr = str.split('=');
            if (arr[0] == ref) {
              return url.substr(0, url.indexOf('?'));
            }
            else {
              return url;
            }
          }
        },
        loadMores (type) {
          // 请求类型: type    (1为公示消息 2为任免消息)
          if (type == '1') {
            let noticePageNum = sessionStorage.getItem("noticePage")
            if (noticePageNum) {
              this.pageNum = noticePageNum
            } else {
              this.pageNum = 1;
            }
            let nowPage = Number(this.pageNum) + 1
 
            let params = {
              type: 1,
              pageNum: Number(nowPage),
              pageSize: 10
            }
            this.Axios.Post(this.URL.queryMoreList.url, params).then((res) => {
              if (res.data.datas.length == 0) {
                Message({
                  message: '已加载全部...',
                  type: 'warning'
                })
                return
              }
              this.noticeLists = this.noticeLists.concat(res.data.datas)
//            sessionStorage.setItem("noticeLists", JSON.stringify(this.noticeLists))
              sessionStorage.setItem("noticePage", nowPage)
            });
          } else if (type == '2') {
            let appointPageNum = sessionStorage.getItem("appointPage")
            if (appointPageNum) {
              this.pageNum = appointPageNum
            } else {
              this.pageNum = 1;
            }
            let nowPage = Number(this.pageNum) + 1
  
            let params = {
              type: 2,
              pageNum: Number(nowPage),
              pageSize: 10
            }
            this.Axios.Post(this.URL.queryMoreList.url, params).then((res) => {
              if (res.data.datas.length == 0) {
                Message({
                  message: '已加载全部...',
                  type: 'warning'
                })
                return
              }
              this.appointLists = this.appointLists.concat(res.data.datas);
       
//            sessionStorage.setItem("appointLists", JSON.stringify(this.appointLists))
              sessionStorage.setItem("appointPage", nowPage)
            });
          } else if (type == '3') {
            let recruitPageNum = sessionStorage.getItem("recruitPage")
            if (recruitPageNum) {
              this.pageNum = recruitPageNum
            } else {
              this.pageNum = 1;
            }
            let nowPage = Number(this.pageNum) + 1
      
            let params = {
              pageNum: Number(nowPage),
              pageSize: 10,
              type:3,
            }
            this.Axios.Post(this.URL.queryMoreList.url, params).then((res) => {
              if (res.data.datas.length == 0) {
                Message({
                  message: '已加载全部...',
                  type: 'warning'
                })
                return
              }
              this.recruitLists = this.recruitLists.concat(res.data.datas)
//            sessionStorage.setItem("recruitLists", JSON.stringify(this.recruitLists))
              sessionStorage.setItem("recruitPage", nowPage)
            });
          }
          
        },
        handleChange () {

        }
    },
    created () {
      var tabInfo = this.$route.query.tabInfo
      this.activeName = tabInfo
//    let appointListsArr = JSON.parse(sessionStorage.getItem("appointLists"))
//    let noticeListsArr = JSON.parse(sessionStorage.getItem("noticeLists"))
//    let recruitMoreListsArr = JSON.parse(sessionStorage.getItem("recruitLists"))
   
      
      let appointListsArr = '';
      let noticeListsArr = '';
      let recruitMoreListsArr = '';
      // 有缓存就取缓存，没有缓存查接口
      if (appointListsArr) {
        this.appointLists = appointListsArr
        console.log(this.appointLists," this.appointLists");
      } else {
        let appointParams = {
          type: 2,
          pageNum: 1,
          pageSize: 10
        }
        this.Axios.Post(this.URL.queryMoreList.url, appointParams).then((res) => {
          this.appointLists = res.data.datas // 任免列表
          console.log(this.appointLists," this.appointLists");
//        sessionStorage.setItem("appointLists", JSON.stringify(this.appointLists))
        });
      }
      
      if (noticeListsArr) {
        this.noticeLists = noticeListsArr
      } else {
        let noticeParams = {
          type: 1,
          pageNum: 1,
          pageSize: 10
        }
        this.Axios.Post(this.URL.queryMoreList.url, noticeParams).then((res) => {
          this.noticeLists = res.data.datas // 公示列表
//        sessionStorage.setItem("noticeLists", JSON.stringify(this.noticeLists))
        });
      }
      
      if (recruitMoreListsArr) {
        this.recruitLists = recruitMoreListsArr
      } else {
        let recruitParams = {
          pageNum: 1,
          pageSize: 10,
          type: 3,
        }
        this.Axios.Post(this.URL.queryMoreList.url, recruitParams).then((res) => {
          this.recruitLists = res.data.datas // 招聘列表
//        sessionStorage.setItem("recruitLists", JSON.stringify(this.recruitLists))
          // for (var i = 0;i < res.data.datas.length; i++) {
          //   let workDutyArr = res.data.datas[i].work_duty.split('、')
          //   console.log(workDutyArr);
          // }
        });
      }

      if (this.$route.query.flag = 'fromEmpl') {
        
        if (this.$route.query.tabInfo == 'third') {
          if (this.$route.query.id) {
            // this.recruitDetail(this.$route.query.id)
            this.showDetail(this.$route.query.id)
            this.show_list = false
          }
        } else {
          if (this.$route.query.id) {
            this.showDetail(this.$route.query.id)
            this.show_list = false
          }
        }
      }
    },
		components:{
      "v-header":header,
    },
 
    filters: {  
      timeFormat: function (value, start, length) {
        return value.substr(start, length).replace(/-/g, ".")
      },
      timeFormat2: function (value, start, length) {
        return value.substr(start, length)
      } 
    }
  }
</script>

<style>
.noticeAll_head {
  height: 50px;
  background: #3c8dbc;
  line-height: 50px;
  text-align: center;
  color: #fff;
 }
 .noticeAll_section {
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box; /* Safari */
  padding: 30px 0 0 0;
  background: #ecf0f5;
  margin-top: 50px;
}
.noticeAll_section .noticeAll_tabs {
  background: #fff;
  position: relative;
  margin-bottom: 30px;
}
.noticeAll_section .hover:hover{
   cursor: pointer;
}
.noticeAll_section .detail_ctn {
  margin: 30px 0;
}
.noticeAll_section .detail_ctn h1 {
  font-size: 20px;
}
.noticeAll_section .detail_ctn .tip {
  height: 40px;
  line-height: 40px;
  color: #999;
  border-bottom: 1px solid #eee;
}
.noticeAll_section .detail_ctn .tip .toback {
  float: right;
  color: #38f;
  /* font-size: 12px; */
  cursor: pointer;
}
.noticeAll_section .detail_ctn .main_txt {
  min-height: 400px;
  font-size: 13px;
  margin: 30px 0;
  font-size: 18px;
}
.noticeAll_section .noticeAll_tabs .launch {
  position: absolute;
  right: 110px;
  top: 0;
  height: 42px;
  line-height: 42px;
  color: #38f;
  font-weight: 900;
}
.noticeAll .el-tabs__header {
  border-bottom: 10px solid #eee;
  padding: 0 100px;
}
.noticeAll .el-tabs__content {
  padding: 0 110px;
}
.noticeAll .el-tabs__item.is-active {
  border-top: 2px solid #38f;
  background: #eee;
}
.noticeAll .el-tabs__nav-scroll {
  height: 41px;

}
.noticeAll .el-tabs__nav-scroll .el-tabs__item {
  color: #000;
  padding: 0 30px;
}
.noticeAll .el-tabs__active-bar {
  background: #fff;
}
.noticeAll_section .noticeAll_tabs .appoint_items {
  padding: 20px;
  border-bottom: 1px solid #eee;
}
.noticeAll_section .noticeAll_tabs .appoint_items:hover {
  background: #ddd;
  cursor: pointer;
}
.noticeAll_section .noticeAll_tabs .appoint_items .items_sub {
  display: inline-block;
  width: 23px;
  height: 23px;
  vertical-align:top;
  background: #38f;
  font-size: 14px;
  line-height: 25px;
  text-align: center;
  color: #fff;
  border-radius: 25px;
  position: relative;
  top: -1px;
  margin-right: 10px;
}
.noticeAll_section .noticeAll_tabs .appoint_items .items_main {
  display: inline-block;
  width: calc(100% - 180px);
  font-size: 15px;
  margin-right:25px;
  font-weight: 900;
}
.noticeAll_section .noticeAll_tabs .appoint_items .items_time {
  display: inline-block;
  width: 100px;
  color: #999;
  float: right;
}
.noticeAll_section .noticeAll_tabs .publicity_items {
  padding: 20px;
  border-bottom: 1px solid #eee;
}
.noticeAll_section .noticeAll_tabs .publicity_items:hover {
  background: #ddd;
  cursor: pointer;
}
.noticeAll_section .noticeAll_tabs .publicity_items .items_sub {
  display: inline-block;
  width: 23px;
  height: 23px;
  background: #38f;
  font-size: 14px;
  line-height: 25px;
  text-align: center;
  color: #fff;
  border-radius: 25px;
  vertical-align:top;
  position: relative;
  top: -1px;
  margin-right: 10px;
}
.noticeAll_section .noticeAll_tabs .publicity_items .items_main {
  font-size: 15px;
  margin-right:25px;
  font-weight: 900;
}
.noticeAll_section .noticeAll_tabs .publicity_items .items_time {
  display: inline-block;
  width: 100px;
  color: #999;
  float: right;
}
.noticeAll_section .noticeAll_tabs .loadMore {
  height: 60px;
  line-height: 60px;
  text-align:center;
  color: #999;
}
.noticeAll_section .noticeAll_tabs .loadMore:hover {
  color: #38f;
  cursor: pointer;
}
.noticeAll .recruit_title {
  overflow: hidden;
  border-bottom: 1px solid #eee;
}
.noticeAll .recruit_title .title_item {
  height: 60px;
  line-height: 60px;
  font-size: 15px;
  font-weight: 900;
  float: left;
}
.noticeAll .item_name {
  width: 22%;
  padding-left: 35px;
}
.noticeAll .item_department {
  width: 21%;
}
.noticeAll .item_num {
  width: 12%;  text-align: center;
}
.noticeAll .item_addr {
  width: 20%;
  text-align: center;
}
.noticeAll .item_time {
  width: 20%;
  text-align: right;
}
.noticeAll .recruit_list {
  overflow: hidden;
}
.noticeAll .recruit_list .info_item {
  float: left;
}
.noticeAll .recruit_list .recruit_items {
  min-height: 57px;
  line-height: 57px;
  clear: both;
  overflow: hidden;
  position: relative;
}
.noticeAll .recruit_list .recruit_items .el-collapse {
  border: 0;
  border-bottom: 1px solid #dfe6ec;
}
.noticeAll .recruit_list .recruit_items .el-collapse-item__header {
  /*height: 56px;
  line-height: 56px;*/
   clear: both;
  overflow: hidden;
  padding-left: 0;
}
.noticeAll .recruit_list .is-active .el-collapse-item__header {
  border-bottom: 0;
}
.noticeAll .recruit_list .recruit_items .el-collapse-item__wrap {
  background: #fff;
}
.noticeAll .recruit_list .recruit_items .el-icon-arrow-right {
  position: relative;
  left: 10px;
}
.noticeAll .recruit_list .recruit_items .item_time {
  /* text-align: center; */
}
.noticeAll .recruit_list .recruit_detail {
  padding: 10px 50px;
}
.noticeAll .recruit_list .recruit_detail .main_info{
  overflow: hidden;
  margin-bottom: 20px;
}
.noticeAll .recruit_list .recruit_detail .title {
  width: 15%;
  float: left;
  font-weight: 900;
}
.noticeAll .recruit_list .recruit_detail .main_list {
  width: 60%;
  float: left;
}
.noticeAll .recruit_list .item_department,
.noticeAll .recruit_list .item_num,
.noticeAll .recruit_list .item_addr,
.noticeAll .recruit_list .item_time {
  color: #999;
}
.noticeAll .recruit_list .fa-angle-down {
  position: absolute;
  right: 10px;
  top: 15px;
  font-size: 20px;
  color: #999;
}
.noticeAll .recruit_list .duty li,
.noticeAll .recruit_list .must li {
  /* list-style: disc outside none; */
}
.noticeAll .recruit_list .duty .main_list,
.noticeAll .recruit_list .must .main_list {
  /* margin-left: 16px; */
}
.noticeAll .el-collapse-item__header{
  border-bottom: none;
}
.noticeAll .recruit_list .recruit_items{
   border-bottom: 1px solid #dfe6ec;
}


.noticeAll div.imgBox {
  background-color: rgba(0, 0, 0, 0.01);
  text-align: center;
  border-radius: 50%;
  padding: 30px;
  width: 320px;
  height: 320px;
  line-height: 320px;
  margin: 0 auto;
  margin-top: 160px;
}
.noticeAll div.imgBox img {
  display: inline-block;
  height: 200px;
  width: 200px;
}
.noticeAll p.data {
  margin-top: 25px;
  text-align: center;
}

</style>
